<?php $this->load->view('public_header');?>
        <!-- header image -->
        <div class="header-img"></div>
        <!-- end header image -->
        <!-- Welcome message -->
        <div class="welcome-container">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="welcome-wrapper">
                            <h2 class="welcome-title text-uppercase">Welcome</h2>
                            <img src="/static/img/welcome-divider-lines.png" alt="Welcome divider" class="welcome-divider-lines-img">
                            <p class="welcome-description">Multi Profile is free responsive website template for everyone. Feel free to download and use this template for your websites. Thank you for visiting templatemo.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Welcome message -->
        <!-- main content -->
        <section class="templatemo-container section-shadow-bottom">
            <div class="container">
                <div class="row section-title-container">
                    <div class="col-lg-12 text-uppercase text-center">
                        <h2 class="section-title">Slider</h2>
                        <div class="section-title-underline-blue"></div>
                        <hr class="section-title-underline">
                        <p class="small">Lorem ip sums</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <h3 class="section-title-2 text-uppercase font-weight-300"><b>中国北方昆曲剧院寻根之旅走进发祥地高阳河西村</b> <span class="blue-text"></span></h3>
                        <p>
3月2日一大早，高阳县庞佐乡河西村的百姓就等在村委会的大院里，中国北方昆曲剧院的艺术家们将要为这里的乡亲们演出，并展开他们的寻根之旅。 
</p>
<p>
高阳县河西村是北方昆曲的发祥地。河西村昆曲诞生于明朝末年，距今已有400多年的历史，在发展过程中形成了自己程式严谨，念白古雅兼顾北方语言特点，载歌载舞，唱腔优美动听的艺术特点。
</p>
<!--                        <ul class="gray-text ul-1">-->
<!--                            <li>Sed non mauris vitae erat consequat auctor</li>-->
<!--                            <li>Class aptent taciti sociosqu</li>-->
<!--                            <li>Wonubia nostra, per inceptos himeos</li>-->
<!--                        </ul>-->
                        <a href="http://www.gaoyang.gov.cn/info_show.asp?infoid=772" class="btn-blue-gradient">详细</a>
                        <a href="#" class="btn-transparent">Prima Liuam</a>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="carousel-container">
                            <div class="crsl-items" data-navigation="navbtns">
                                <div class="crsl-wrap">
                                    <figure class="crsl-item">
                                        <img src="/static/img/1.jpg?v" alt="Image" class="img-responsive img-thumbnail">
                                    </figure>
                                    <figure class="crsl-item">
                                        <img src="/static/img/2.jpg" alt="Image" class="img-responsive img-thumbnail">
                                    </figure>
                                    <figure class="crsl-item">
                                        <img src="/static/img/3.jpg" alt="Image" class="img-responsive img-thumbnail">
                                    </figure>
                                </div>
                            </div>
                        </div>   <!-- carousel-container -->
                        <div id="navbtns" class="crsl-nav">
                            <a href="#" class="previous">
                                <img src="/static/img/carousel-arrow-previous.png" alt="previous">
                            </a>
                            <a href="#" class="next">
                                <img src="/static/img/carousel-arrow-next.png" alt="next">
                            </a>
                        </div>
                    </div>
                </div>
                <!-- end section content -->
            </div>
        </section>
        <!-- Who We Are -->
        <section class="templatemo-container light-gray-bg section-shadow-bottom">
            <div class="container">
                <div class="row section-title-container">
                    <div class="col-lg-12 text-uppercase text-center">
                        <h2 class="section-title">家乡知多少</h2>
                        <div class="section-title-underline-blue"></div>
                        <hr class="section-title-underline">
                        <p class="small">Proin Gravidani</p>
                    </div>
                </div> <!-- row -->
                <div class="row">
                    <div class="col-lg-5 col-md-5">
                        <div class="tm-blocks-container effect1">
                            <div class="tm-block green-bg">
                                <a href="#" class="tm-block-link">Technologies</a>
                            </div>
                            <div class="tm-block">
                                <img src="/static/img/4.jpg" alt="Image" class="img-responsive">
                            </div>
                            <div class="tm-block">
                                <img src="/static/img/5.jpg" alt="Image" class="img-responsive">
                            </div>
                            <div class="tm-block red-bg">
                                <a href="#" class="tm-block-link">Vision</a>
                            </div>
                            <div class="tm-block yellow-bg">
                                <a href="#" class="tm-block-link">Awards</a>
                            </div>
                            <div class="tm-block">
                                <img src="/static/img/6.jpg" alt="Image" class="img-responsive">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-7">
                        <h3 class="section-title-2 text-uppercase font-weight-300"><b>河西村</b> <span class="blue-text">HEXICUN</span></h3>
                        <p class="justify-text">
                        河西村  位于乡人民政府驻地东南2.1公里处。2014年底，有耕地4067.01亩；人口2018人。本村由秦、贾二姓始建于唐代中期。明永乐二年（1404年），侯氏大仁、大义、大友三兄弟自山西迁来定居，以居于河道之西称村为河西村。民国27年（1938年）1月，高阳县民族革命战争战地总动员委员会和高阳县抗日民主政府诞生于此地。河西村是著名的北方昆曲之乡，1957年北方昆曲院在北京成立，全院仅有的10名老艺人都曾从艺于河西村，其中有5位就是河西村人，剧院的乐队从队长到全班乐手，清一色都是从河西村直接调来。为传承北昆这一国家级非物质文化遗产，中国北方昆曲剧院多次开展寻根之旅走进发祥地河西村慰问演出，并于2013年在河西村成了了北方昆曲培训基地，北昆剧院的老师们每月两次到河西村指导孩子们练习。目前，在北昆剧院和本村老艺人的指导下，小学员们已能排练一些简单的曲目。村内有阳光电器设备有限公司、双强电气设备有限公司等企业，是电器电料产业中的龙头企业。村支部成员有4人，其中侯金钊为村支书；村委会成员有3人，其中侯冠英为村主任。</p>
                        <p class="justify-text">
                        </p>
                        <p class="justify-text">
                            </p>
                    </div>
                </div>
            </div>
        </section>
        <!-- Blog -->
        <section class="templatemo-container">
            <div class="container">
                <div class="row section-title-container">
                    <div class="col-lg-12 text-uppercase text-center">
                        <h2 class="section-title">历史</h2>
                        <div class="section-title-underline-blue"></div>
                        <hr class="section-title-underline">
                        <p class="small">Proin Gravidani</p>
                    </div>
                </div>
                <div class="row posts-container">
                    <div class="post-excerpt post-excerpt-left">
                        <div class="post-content">
                            <h3 class="post-title">Nullam Acurna Euelis</h3>
                            <p class="post-description">Scondimentum siamet augue autodit sit red non neque elit edut nemoen.</p>
                        </div>
                        <div class="post-date-container">
                            <div class="post-month">Nov</div>
                            <div class="post-date">18</div>
                        </div>
                        <div class="post-arrow-container rotate-arrow">
                            <img src="/static/img/blog-arrow.png" alt="arrow">
                        </div>
                    </div>
                    <div class="post-excerpt post-excerpt-right">
                        <div class="post-arrow-container">
                            <img src="/static/img/blog-arrow.png" alt="arrow">
                        </div>
                        <div class="post-date-container">
                            <div class="post-month">Nov</div>
                            <div class="post-date">19</div>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">Condenimtin nemoa</h3>
                            <p class="post-description">Scondimentum siamet augue autodit sit red non neque elit edut nemoen.</p>
                        </div>
                    </div>
                    <div class="post-excerpt post-excerpt-left">
                        <div class="post-content">
                            <h3 class="post-title">Voluptatem Quial</h3>
                            <p class="post-description">Scondimentum siamet augue autodit sit red non neque elit edut nemoen.</p>

                        </div>
                        <div class="post-date-container">
                            <div class="post-month">Nov</div>
                            <div class="post-date">20</div>
                        </div>
                        <div class="post-arrow-container rotate-arrow">
                            <img src="/static/img/blog-arrow.png" alt="arrow">
                        </div>
                    </div>
                    <div class="post-excerpt post-excerpt-right">
                        <div class="post-arrow-container">
                            <img src="/static/img/blog-arrow.png" alt="arrow">
                        </div>
                        <div class="post-date-container">
                            <div class="post-month">Nov</div>
                            <div class="post-date">21</div>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">Augue Autioist</h3>
                            <p class="post-description">Scondimentum siamet augue autodit sit red non neque elit edut nemoen.</p>

                        </div>
                    </div>
                    <div class="post-excerpt post-excerpt-left">
                        <div class="post-content">
                            <h3 class="post-title">Tempori Autemos</h3>
                            <p class="post-description">Scondimentum siamet augue autodit sit red non neque elit edut nemoen.</p>
                        </div>
                        <div class="post-date-container">
                            <div class="post-month">Nov</div>
                            <div class="post-date">22</div>
                        </div>
                        <div class="post-arrow-container rotate-arrow">
                            <img src="/static/img/blog-arrow.png" alt="arrow">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Features -->
        <section class="templatemo-container features">
            <div class="container features-content">
                <div class="row section-title-container">
                    <div class="col-lg-12 text-uppercase text-center">
                        <h2 class="section-title">Features</h2>
                        <div class="section-title-underline-blue"></div>
                        <hr class="section-title-underline">
                        <p class="small">Proin Gravidani</p>
                    </div>
                </div>
                <div class="row">
                    <div class="feature-container">
                        <p class="text-center margin-bottom-30 gray-text">Consequat ipsum, nex sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
                        <div class="tm-progress-container tm-progress-container-left">
                            <div class="tm-progress-label">
                                <p class="pull-left">Wordpress</p>
                                <p class="pull-right">80%</p>
                            </div>
                            <div class="progress tm-progress">
                              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
                                <span class="sr-only">80% Complete</span>
                              </div>
                            </div>
                        </div>
                        <div class="tm-progress-container tm-progress-container-right">
                            <div class="tm-progress-label">
                                <p class="pull-left">SEO</p>
                                <p class="pull-right">75%</p>
                            </div>
                            <div class="progress tm-progress">
                              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
                                <span class="sr-only">75% Complete</span>
                              </div>
                            </div>
                        </div>
                        <div class="tm-progress-container tm-progress-container-left">
                            <div class="tm-progress-label">
                                <p class="pull-left">Web Design</p>
                                <p class="pull-right">90%</p>
                            </div>
                            <div class="progress tm-progress">
                              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                                <span class="sr-only">90% Complete</span>
                              </div>
                            </div>
                        </div>
                        <div class="tm-progress-container tm-progress-container-right">
                            <div class="tm-progress-label">
                                <p class="pull-left">UX</p>
                                <p class="pull-right">86%</p>
                            </div>
                            <div class="progress tm-progress">
                              <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 86%;">
                                <span class="sr-only">86% Complete</span>
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-overlay"></div>
        </section>
        <?php $this->load->view('public_footer');?>
        <script>

            $(function() {
                $('.crsl-items').carousel({
                    visible: 1,
                    itemMinWidth: 320,
                    itemEqualHeight: 320,
                    itemMargin: 9,
                });
                $(".crsl-nav a[href=#]").on('click', function(e) {
                    e.preventDefault();
                });
            });

        </script>
    </body>
</html>
